<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top>
				<div class="slot-top">
					<div class="slot-top-c">
						<el-row type="flex" class="row-bg" justify="space-around">
							<el-col :span="4" v-for="(item, index) in dayAllowance" :key="index">
								<el-button @click="toView('bwbtConfig')">
									渠道:
									<a v-if="item.relation == 'yzf'">翼支付</a>
									<a v-else-if="item.relation == 'hf'">嗨返</a>
									<a v-else-if="item.relation == 'h5'">网页</a>
									<a v-else-if="item.relation == 'km'">K米</a>
									<a v-else-if="item.relation == 'wx'">微信</a>
									- 补贴金:
									<a>{{ item.subsidiesToday }}</a>
								</el-button>
							</el-col>
						</el-row>
					</div>
					<div class="slot-top-l"></div>
				</div>
			</template>
			<template #slot-filter>
				<div class="nav base-flex" style="margin-right:10px">
					<div>
						<date-picker
							@change="
								val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })
							"
							@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
						></date-picker>
					</div>
					<div class="nav-li"></div>
				</div>
			</template>
			<template #table-column-rateType="{scope}">
				<div>
					<el-tag v-if="scope.row.rateType == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-top="{scope}">
				<div>
					<el-tag v-if="scope.row.top == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-goodInfo="{scope}">
				<good-info :item="scope.row"></good-info>
			</template>
			<template #table-column-couponInfo="{scope}">
				<coupon-info :item="scope.row"></coupon-info>
			</template>
			<template #table-column-isDHh="{scope}">
				<div>
					<el-tag v-if="scope.row.isDHh == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-isNine="{scope}">
				<div>
					<el-tag v-if="scope.row.isNine == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-platform="{scope}">
				{{
				scope.row.source | dict_platform
				}}
			</template>
			<template #table-column-startTime="{scope}">
				<div style="text-align:left">
					<div>
						淘礼金金额：
						<span style="color:red">{{ scope.row.tljMoney }}</span>
					</div>
					<div>
						总数：
						<span style="color:red">{{ scope.row.total }}</span>
					</div>
					<div>
						已领数量：
						<span style="color:red">{{ scope.row.receiveNum }}</span>
					</div>
					<div>
						剩余数量：
						<span style="color:red">{{ scope.row.surplus }}</span>
					</div>
					<div>活动开始时间：{{ scope.row.startTime | dateFormatLine }}</div>
					<div>活动结束时间：{{ scope.row.endTime | dateFormatLine }}</div>
				</div>
			</template>
			<template #table-column-status="{scope}">
				<div>
					<el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
					<el-tag type="info" v-if="scope.row.status == 2">已下架</el-tag>
				</div>
			</template>
			<template #slot-setSort="{scope}">
				<span class="setsort" @click="setGoodsort(scope.row)">修改</span>
			</template>

			<template #slot-viewType>
				<el-button type="text" size="mini" @click="openForm_CRUD" style="margin-right:1em">查看金币</el-button>
			</template>
			<template #slot-tinyint>
				<div class="select-box">
					<span style="font-size:12px">是否定向：</span>
					<el-select
						size="mini"
						filterable
						placeholder="是否定向"
						v-model="select.tinyint"
						style="margin-right: 1em;width:100px;"
						@change="val => crud.refresh({ rateType: val, page: 1 })"
					>
						<el-option value label="全部"></el-option>
						<el-option label="是" :value="1"></el-option>
						<el-option label="否" :value="0"></el-option>
					</el-select>
				</div>
				<div class="select-box">
					<span style="font-size:12px">是否置顶：</span>
					<el-select
						size="mini"
						filterable
						placeholder="是否置顶"
						v-model="select.top"
						style="margin-right: 1em;width:100px;"
						@change="val => crud.refresh({ top: val, page: 1 })"
					>
						<el-option value label="全部"></el-option>
						<el-option label="是" :value="1"></el-option>
						<el-option label="否" :value="0"></el-option>
					</el-select>
				</div>
			</template>
			<!-- 百万补贴分类过滤 -->
			<template #slot-filter-type>
				<div class="nav-li" style="margin-right:1em;">
					<span style="font-size:12px">金币：</span>
					<el-select
						size="mini"
						class="el-select"
						v-model="select.specialType"
						placeholder="请选择"
						@change="
							val =>
								crud.refresh({
									goldAmount: val
								})
						"
					>
						<el-option
							v-for="item in options.specialTypeOp"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</div>
				<div class="nav-li" style="margin-right:1em;">
					<el-select
						size="mini"
						filterable
						placeholder="上架状态"
						v-model="select.state"
						style="margin-right: 1em;width:100px;"
						@change="val => crud.refresh({ status: val, page: 1 })"
					>
						<el-option value label="全部"></el-option>
						<el-option label="已上架" :value="1"></el-option>
						<el-option label="已下架" :value="2"></el-option>
					</el-select>
				</div>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import moment from 'moment';
import DatePicker from '@/components/common/date-picker';
import goodInfo from './components/list/good-info';
import couponInfo from './components/list/coupon-info';
import searchCounpon from './components/list/searchCoupon';
import { Type_TLJ } from '@/dict/index';
import openCurd from './components/openFormBwbt';
import stores from '@/utils/store';

export default {
	data() {
		return {
			crud: null,
			enterGoodsInfo: {},
			accval: '',
			accountList: [],
			dayAllowance: [],
			typeOptions: [],
			select: {
				specialType: '',
				state: 1,
				tinyint: '',
				top: ''
			},
			options: {
				account: [],
				specialTypeOp: [],
				price1: 0,
				price2: 0
			},
			iframeisshow: true
		};
	},
	components: {
		goodInfo,
		couponInfo,
		// eslint-disable-next-line
		searchCounpon,
		DatePicker
	},

	mounted() {
		// 获取顶部补贴数据
		this.$service.goodsMenagement.bwbtConfig.page().then(res => {
			this.dayAllowance = res.list;
		});
		// 获取百万补贴商品分类
		this.$service.interactiveSoft.giftClassify
			.page({
				page: 1,
				size: 60
			})
			.then(res => {
				var temp = res.list;
				var target = [];
				for (var i = 0; i < temp.length; i++) {
					target[i] = { label: temp[i].goldAmount + '金币', value: temp[i].goldAmount };
				}

				var str = JSON.stringify(target);
				str = str.substring(1, str.length - 1);
				str = '[{"label":"全部", "value":""},' + str + ']';
				this.typeOptions = target;
				this.options.specialTypeOp = JSON.parse(str);
			});
		// 获取帐号筛选列表
		this.$service.goodsMenagement.getTljAccountList
			.page({
				page: 1,
				size: 100,
				sort: 'desc',
				order: 'createTime'
			})
			.then(res => {
				var temp = res.list;
				var target = [];
				for (var i = 0; i < temp.length; i++) {
					target[i] = { label: temp[i].account, value: temp[i].id };
				}
				this.accountList = target;
			});
	},
	methods: {
		toView(url) {
			this.$router.push(url);
		},
		updateItem() {
			this.crud.setForm('hzQuanOver', this.enterGoodsInfo.hzQuanOver);
			this.crud.setForm('quanMLink', this.enterGoodsInfo.quanMLink);
		},
		openForm_CRUD() {
			let that = this;
			this.$refs['cl-form'].open({
				props: {
					title: '查看金币',
					width: '800px',
					size: 'mini',
				},
				op: {
					confirmButtonText: '确定',
					cancelButtonText: '关闭',

					layout: ['confirm'] // 同crud下的layout
				},
				items: [
					{
						props: {
							labelWidth: '0px'
						},
						component: openCurd
					}
				],
				on: {
					submit({ data, close }) {
						close()
						that.$service.interactiveSoft.giftClassify
								.page({
									page: 1,
									size: 60
								})
								.then(res => {
									var temp = res.list;
									var target = [];
									for (var i = 0; i < temp.length; i++) {
										target[i] = { label: temp[i].goldAmount + '金币', value: temp[i].goldAmount };
									}

									var str = JSON.stringify(target);
									str = str.substring(1, str.length - 1);
									str = '[{"label":"全部", "value":""},' + str + ']';
									that.typeOptions = target;
									that.options.specialTypeOp = JSON.parse(str);
								});
					}
				}
			});
		},
		// 修改商品数据
		setGoodsort(item) {
			console.log(item);
			const self = this;
			this.$refs['cl-form'].open({
				props: {
					'label-width': '120px',
					width: '570px',
					center: true,
					'custom-class': 'custom-class-dialog-mini'
				},
				items: [
					{
						prop: 'pic',
						label: '商品主图：',
						span: 24,
						value: item.pic,
						component: {
							name: 'cl-upload'
						}
					},
					{
						prop: 'title',
						label: '商品标题',
						span: 24,
						value: item.title,
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini'
							}
						}
					},
					{
						prop: 'startTime',
						label: '活动开始时间：',
						span: 13,
						value: moment(item.startTime * 1000).format('YYYY-MM-DD HH:mm:ss'),
						component: {
							name: 'el-date-picker',
							attrs: {
								// type: 'datetimerange',
								'value-format': 'yyyy-MM-dd HH:mm:ss'
							}
						},
						rules: [
							{
								required: true,
								message: '请选择活动时间',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'goldAmount',
						label: '金币分类',
						span: 12,
						value: item.goldAmount,
						component: {
							name: 'el-select',
							attrs: {
								placeholder: '请选择'
							},
							props: {
								clearable: true
							},
							options: this.typeOptions
						},
						rules: {
							required: true,
							message: '金币分类不能为空'
						}
					},
					{
						prop: 'total',
						label: '商品数量：',
						value: item.total,
						span: 12,
						component: {
							name: 'el-input-number',
							attrs: {
								min: item.total
							}
						}
					},
					{
						prop: 'ysqLevel',
						label: '商品排序：',
						value: item.ysqLevel,
						component: {
							name: 'ysqlevels',
							data() {
								return {
									ysqLevel: 100
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.ysqLevel = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.ysqLevel}
											controls-position="right"
											onInput={this.input}
											min={1}
											max={10000}></el-input-number>
										<span style="color:#999999;margin-left:10px">
											序号越大，排序越靠前
										</span>
									</div>
								);
							}
						}
					},
					{
						prop: 'zfbLevel',
						label: '支付宝排序：',
						value: item.zfbLevel,
						component: {
							name: 'zfbLevels',
							data() {
								return {
									zfbLevel: 1
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.zfbLevel = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div>
										<el-input-number
											v-model={this.zfbLevel}
											controls-position="right"
											onInput={this.input}
											min={1}
											max={10000}></el-input-number>
										<span style="color:#999999;margin-left:10px">
											序号越大，排序越靠前
										</span>
									</div>
								);
							}
						}
					},
					{
						prop: 'defNum',
						label: '领取基数:',
						value: item.defNum,
						span: 13,
						component: {
							name: 'el-input-number'
						}
					},
					{
						prop: 'status',
						label: '商品状态：',
						value: item.status,
						component: {
							name: 'g_radio',
							data() {
								return {
									value2: 1
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = Number(this.value || 1);
							},
							methods: {
								change(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<el-radio-group onChange={this.change} v-model={this.value2}>
										<el-radio label={1}>上架</el-radio>
										<el-radio label={2}>下架</el-radio>
									</el-radio-group>
								);
							}
						}
					},
					{
						prop: 'rateType',
						label: '是否定向',
						value: item.rateType,
						component: {
							name: 'r_radio',
							data() {
								return {
									value2: 1
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = Number(this.value);
								console.log('this.value', this.value);
							},
							methods: {
								change(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<el-radio-group onChange={this.change} v-model={this.value2}>
										<el-radio label={1}>是</el-radio>
										<el-radio label={0}>否</el-radio>
									</el-radio-group>
								);
							}
						}
					},
					{
						prop: 'top',
						label: '是否置顶',
						value: item.top,
						component: {
							name: 't_radio',
							data() {
								return {
									value2: 1
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.value2 = Number(this.value);
								console.log('this.value', this.value);
							},
							methods: {
								change(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<el-radio-group onChange={this.change} v-model={this.value2}>
										<el-radio label={1}>是</el-radio>
										<el-radio label={0}>否</el-radio>
									</el-radio-group>
								);
							}
						}
					}
				],
				on: {
					submit({ data, close }) {
						// console.log(data);
						data.startTime = moment(data.startTime).unix();
						self.$service.goodsMenagement.mdGoods
							.updateInfo({
								...data,
								gid: item.gid,
								id: item.id
							})
							.then(() => {
								self.$message({
									message: '设置成功',
									type: 'success'
								});
								self.crud.refresh();
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
							});
					}
				}
			});
		},

		// 添加商品
		addGoods() {
			this.crud.add();
		},
		// 初始化函数
		onLoad({ ctx, app }) {
			let self = this;
			this.crud = app;
			ctx.service(this.$service.goodsMenagement.mdGoods)
				.set('dict', {
					api: {
						update: 'updateInfo'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						{
							label: '商品信息',
							prop: 'goodInfo',
							align: 'left',
							'min-width': 400
						},
						{
							label: '优惠券信息',
							prop: 'couponInfo',
							align: 'left',
							'min-width': 350
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center',
							'min-width': 150,
							sortable: 'custom'
						},
						{
							label: '更新时间',
							prop: 'updateTime',
							align: 'center',
							'min-width': 150,
							sortable: 'custom'
						},
						{
							label: '是否定向',
							prop: 'rateType',
							align: 'center'
						},
						{
							label: '是否置顶',
							prop: 'top',
							align: 'center'
						},
						{
							label: '联盟号',
							prop: 'account',
							align: 'center'
						},
						{
							label: '月销量',
							prop: 'sale',
							align: 'center'
						},
						{
							label: '商品排序',
							prop: 'ysqLevel',
							align: 'center',
							sortable: 'custom',
							emptyText: '0',
							'min-width': 100
						},
						{
							label: '支付宝排序',
							prop: 'zfbLevel',
							align: 'center',
							sortable: 'custom',
							emptyText: '0',
							'min-width': 120
						},
						{
							label: '活动时间',
							prop: 'startTime',
							align: 'center',
							sortable: 'custom',
							'min-width': '250px'
						},
						{
							label: '佣金比例',
							prop: 'commissionRate',
							align: 'center'
						},
						{
							label: '出单数',
							prop: 'orderNum',
							sortable: 'custom',
							align: 'center',
							'min-width': '90px'
						},
						{
							label: '已领数量',
							prop: 'receiveNum',
							align: 'center',
							sortable: 'custom',
							'min-width': 100
						},
						// {
						// 	label: '9.9包邮',
						// 	prop: 'isNine',
						// 	align: 'center'
						// },
						// {
						// 	label: '抖好货',
						// 	prop: 'isDHh',
						// 	align: 'center'
						// },
						{
							label: '是否下架',
							prop: 'status',
							align: 'center',
							'min-width': 100
						},
						{
							label: '平台',
							prop: 'platform',
							align: 'center'
						}
					],

					op: {
						layout: ['slot-setSort']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '120px',
						center: true,
						'custom-class': 'custom-class-dialog',
						width: '670px'
					},
					items: [
						{
							prop: 'title',
							label: '商品标题',
							span: 24,
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini'
								}
							}
						},
						{
							prop: 'accountIds',
							label: '账号',
							span: 13,
							value: [],
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择账号'
								},
								props: {
									multiple: true
								}
							},
							rules: {
								required: true,
								message: '账号不能为空'
							}
						},
						{
							prop: 'campaignType',
							label: '创建类型',
							span: 10,
							value: 2,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择'
								},
								props: {
									clearable: true
								},
								options: Type_TLJ
							},
							rules: {
								required: true,
								message: '创建类型不能为空'
							}
						},
						{
							prop: 'url',
							props: {
								labelWidth: '0px'
							},
							component: {
								name: 'search-counpon',
								methods: {
									input(e) {
										this.$emit('input', e);
									},
									Goodsinfo(e) {
										self.enterGoodsInfo = e;
										self.updateItem();
										app.setForm('tljName', e.title.substring(0, 10));
										app.setForm('defNum', e.sale);
										app.setForm('title', e.shortTitle);
									},
									perface(v) {
										app.setForm('tljMoney', v < 1 ? 1 : v);
									},
									onSelectPic(url) {
										console.log(url);
										app.setForm('pic', url);
									}
								},
								render() {
									return (
										<searchCounpon
											onInput={this.input}
											onGoodsInfo={this.Goodsinfo}
											onperface={this.perface}
											on-select-pic={this.onSelectPic}
											item={self.enterGoodsInfo}
											type={3}></searchCounpon>
									);
								}
							},
							rules: [{ required: true, message: '请先检索商品', trigger: 'blur' }]
						},
						{
							prop: 'goldAmount',
							label: '金币分类',
							span: 12,
							component: {
								name: 'el-select',
								attrs: {
									placeholder: '请选择'
								},
								props: {
									clearable: true
								},
								options: [],
								on: {
									change: id => {
										console.log(id);
									}
								}
							},
							rules: {
								required: true,
								message: '金币分类不能为空'
							}
						},
						{
							prop: 'tljMoney',
							label: '淘礼金金额：',
							component: {
								name: 'mdMoney_c',
								data() {
									return {
										value2: 0
									};
								},
								props: {
									value: null
								},
								watch: {
									value: {
										handler(val) {
											this.value2 = val;
										}
									}
								},
								methods: {
									Change(e) {
										this.$emit('input', e);
										if (
											this.value2 >=
											(self.enterGoodsInfo.endPrice -
												self.enterGoodsInfo.hzQuanOver) *
												0.8
										) {
											self.$message.error(
												'淘礼金金额不能大于商品券后价的80%'
											);
										}
									}
								},

								render() {
									return (
										<div style="display:flex">
											<el-input-number
												max={
													Number(
														self.enterGoodsInfo.endPrice -
															self.enterGoodsInfo.hzQuanOver
													) * 0.8 || 0
												}
												step={0.01}
												min={1}
												v-model={this.value2}
												onChange={this.Change}></el-input-number>
											<div style="margin-left:10px">
												到手价格￥
												<span style="color:red">
													{(
														parseFloat(
															self.enterGoodsInfo.endPrice || 0
														) -
														(this.value2 ? this.value2 : 0) -
														(self.enterGoodsInfo.hzQuanOver || 0)
													).toFixed(2)}
												</span>
												元
											</div>
										</div>
									);
								}
							}
						},
						{
							prop: 'tljName',
							label: '淘礼金名称',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入名称',
									clearable: true,
									maxlength: 10
								}
							},
							rules: [
								{
									required: true,
									message: '淘礼金名字不能为空'
								},
								{
									min: 5,
									max: 10,
									message: '淘礼金名字在5 ~ 10个字符之间'
								}
							]
						},
						{
							prop: 'total',
							label: '活动商品个数：',
							span: 8,
							value: parseInt(Math.random() * (10000 - 5000 + 1) + 5000, 10),
							component: {
								name: 'el-input-number',
								attrs: {
									'controls-position': 'right',
									min: 1,
									max: 10000
								}
							},
							rules: [
								{
									required: true,
									message: '请输入活动商品数量',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'time',
							label: '活动时间：',
							value: [],
							span: 16,
							component: {
								name: 'el-date-picker',
								attrs: {
									type: 'datetimerange',
									'value-format': 'yyyy-MM-dd HH:mm:ss'
								}
							},
							rules: [
								{
									required: true,
									message: '请选择活动时间',
									trigger: 'blur'
								}
							]
						},
						{
							prop: 'ysqLevel',
							label: '商品排序：',
							value: 100,
							component: {
								name: 'ysqlevels',
								data() {
									return {
										ysqLevel: 100
									};
								},
								props: {
									value: [String, Number]
								},
								mounted() {
									this.ysqLevel = this.value;
								},
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div>
											<el-input-number
												v-model={this.ysqLevel}
												controls-position="right"
												onInput={this.input}
												min={1}
												max={10000}></el-input-number>
											<span style="color:#999999;margin-left:10px">
												序号越大，排序越靠前
											</span>
										</div>
									);
								}
							}
						},
						{
							prop: 'zfbLevel',
							label: '支付宝排序：',
							value: 100,
							component: {
								name: 'zfbLevels',
								data() {
									return {
										zfbLevel: 100
									};
								},
								props: {
									value: [String, Number]
								},
								mounted() {
									this.zfbLevel = this.value;
								},
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<div>
											<el-input-number
												v-model={this.zfbLevel}
												controls-position="right"
												onInput={this.input}
												min={1}
												max={10000}></el-input-number>
											<span style="color:#999999;margin-left:10px">
												序号越大，排序越靠前
											</span>
										</div>
									);
								}
							}
						},
						{
							prop: 'defNum',
							label: '领取基数:',
							value: 0,
							span: 13,
							component: {
								name: 'el-input-number'
							}
						},
						{
							prop: 'status',
							label: '商品状态：',
							value: 1,
							component: {
								name: 'g_radio',
								data() {
									return {
										value2: 1
									};
								},
								props: {
									value: [String, Number]
								},
								mounted() {
									this.value2 = Number(this.value || 1);
								},
								methods: {
									change(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<el-radio-group
											onChange={this.change}
											v-model={this.value2}>
											<el-radio label={1}>上架</el-radio>
											<el-radio label={0}>下架</el-radio>
										</el-radio-group>
									);
								}
							}
						},
						{
							prop: 'top',
							label: '是否置顶：',
							value: 1,
							component: {
								name: 'z_radio',
								data() {
									return {
										value2: 1
									};
								},
								props: {
									value: [String, Number]
								},
								mounted() {
									this.value2 = Number(this.value || 1);
								},
								methods: {
									change(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
										<el-radio-group
											onChange={this.change}
											v-model={this.value2}>
											<el-radio label={1}>是</el-radio>
											<el-radio label={0}>否</el-radio>
										</el-radio-group>
									);
								}
							}
						}
					],
					op: {
						visible: true,
						layout: ['confirm']
					}
				})
				.set('layout', [
					['slot-top'],
					[
						'refresh-btn',
						'add-btn',
						'query',
						'flex1',
						'slot-viewType',
						'slot-filter-type',
						'slot-filter',
						'search-key'
					],
					['flex1', 'slot-price'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					let { list } = await next(params);
					list.map(item => {
						item.commissionRate = item.commissionRate + '%';
						item.sale = item.sale + '件';
					});
				})
				.on('submit', (isOpen, data, { next }) => {
					// console.log(data);
					let obj = {};
					obj.accountIds = data.accountIds || [];
					obj.goldAmount = data.goldAmount;
					obj.total = data.total;
					obj.time = data.time;
					stores.set('subsidyObj', obj);
					data.quanMLink = this.enterGoodsInfo.quanMLink; // 定金
					data.hzQuanOver = this.enterGoodsInfo.hzQuanOver; // 立减
					if (!isOpen) {
						next({
							...data,
							...data.url,
							startTime: data.time[0],
							endTime: data.time[1],
							type: 10,
							tljType: 1,
							accountIds: obj.accountIds.join(','),
							app: stores.get('platForm') || '5gqy'
						});
					}
				})
				.on('open', async isEdit => {
					// 获取阿里妈妈列表
					let list = [];
					list = await this.$service.goodsMenagement.taobaoAccountTlj.userAccountList({
						isBwbt: 1
					});
					list = list.map(item => {
						return {
							label: item.accountName,
							value: item.accountId
						};
					});
					this.crud.setData('upsert.items[prop:accountIds].component.options', list);
					this.crud.setData(
						'upsert.items[prop:goldAmount].component.options',
						this.typeOptions
					);

					app.setForm('time', [
						moment(new Date().getTime() + 86400000).format('YYYY-MM-DD 00:00:00'),
						moment(new Date().getTime() + 172800000).format('YYYY-MM-DD 00:00:00')
					]);
					app.setForm('defNum', parseInt(Math.random() * 4000) + 2000);
					if (stores.get('subsidyObj')) {
						if (!isEdit) {
							app.setForm('accountIds', stores.get('subsidyObj').accountIds);
							app.setForm('goldAmount', stores.get('subsidyObj').goldAmount);
							app.setForm('time', stores.get('subsidyObj').time);
						}
					} else {
						app.setForm('accountIds', [list[0].value]);
						app.setForm(
							'goldAmount',
							this.typeOptions[this.typeOptions.length - 1].value
						);
					}
				})
				.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				status: 1,
				// isFree: 1,
				prop: 'createTime',
				order: 'desc',
				type: 10,
				app: null
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.setsort {
	color: $color-link;
	cursor: pointer;
	margin: 5px 5px 5px 15px;
	:hover {
		opacity: 0.8;
	}
}
.nav {
	font-size: $font12;
	.nav-li {
		margin-left: 10px;
	}
}

.cl-crud {
	padding: 0;
	::v-deep .el-row--1 {
		padding: 0 10px;
	}
	::v-deep .crud-data-table {
		padding: 0 10px;
	}
	::v-deep .el-row:last-child {
		padding: 0 10px;
	}
}

.slot-top {
	width: 100%;
	background: rgba(255, 255, 255, 1);
	.slot-top-c {
		.el-row {
			width: 100%;
		}
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		font-size: $font16;
		@include flexBox(space-between);
		color: $main-light;
		padding: 15px;
		.z {
			width: 22px;
			height: 22px;
		}
	}
	.slot-top-l {
		height: 10px;
		background-color: $bg-grey;
		width: 100%;
	}
	.dayAllowance {
		margin-right: 5em;
	}
	.dayAllowance a {
		font-weight: bold;
	}
}
.select-box {
	display: flex;
	align-items: center;
}
</style>
